<script>
import HumanDressDialog from "@/views/aihuman/humanManagement/addHuman/humanDressDialog.vue";
import HumanDefaultDress from "@/views/aihuman/humanManagement/addHuman/humanDefaultDress.vue";
import {costumesPackDetail} from "@/api/aihuman/humanAssets/dress";

export default {
  name: "humanFuZhuang",
  components: {HumanDefaultDress, HumanDressDialog},
  data() {
    return {
      fuzhuang: [],
      defaultDress: []
    }
  },
  methods: {
    nextStep() {
      this.$emit('on-next', 4)
    },
    prevStep() {
      this.$emit('on-prev', 2)
    },
    openDressDialog() {
      this.$refs.dialog.openDialog(this.fuzhuang)
    },
    getFuzhuang(val) {
      this.fuzhuang = val
      this.defaultDress = []
    },
    openSetDress() {
      let costumeList = []
      this.fuzhuang.forEach(item => {
        costumesPackDetail({id: item.id}).then(res => {
          let temp = res.data.data.costumeList
          temp.forEach(el => {
            costumeList.push(el)
          })
        })
      })

      this.$refs.dressDialog.openDialog(costumeList, this.defaultDress)

    },
    setDefaultDress(val) {
      this.defaultDress = val
    }
  }
}
</script>

<template>
  <div>
    <div class="content">
      <div style="flex: 1;">
        <h3>配置服装</h3>

        <el-row :gutter="50">
          <el-col :span="12">
            <div class="selection-box">
              <header>
                <div>
                  选择服装
                </div>
                <el-button type="text" @click="openDressDialog">资源库选择></el-button>
              </header>

              <div class="selection-box__body">
                <el-tag v-for="item in fuzhuang" :key="item.value" size="small">
                  {{ item.name }}
                </el-tag>
              </div>
            </div>

          </el-col>
          <el-col :span="12">
            <div class="selection-box">
              <header>
                <div>
                  配置默认服装
                </div>
                <el-button type="text" @click="openSetDress">选择></el-button>
              </header>

              <div class="selection-box__body selection-box__body--small">
                <el-tag v-for="item in defaultDress" :key="item.value" size="small">
                  {{ item.costumesName }}
                </el-tag>
              </div>
            </div>
          </el-col>
        </el-row>

      </div>
    </div>

    <human-dress-dialog
      ref="dialog"
      @get-select="getFuzhuang"
    />

    <human-default-dress
      ref="dressDialog"
      @get-select="setDefaultDress"
    />
  </div>
</template>

<style scoped lang="scss">
.el-tag + .el-tag {
  margin-left: 10px;
}

.selection-box {
  width: 100%;

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__body {
    background: #F8F8F8;
    border-radius: 5px;
    padding: 15px;
    height: 100px;
    box-sizing: border-box;

    &--small {
      height: 80px;
    }
  }
}

.human-img {
  height: 450px;
  width: 400px;
  margin-right: 15px;

  img {
    object-fit: contain;
  }
}

.content {
  display: flex;
}
</style>
